<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>

  <script>
    const prefersDark = window.matchMedia(
      "(prefers-color-scheme: dark)",
    ).matches;
    const theme = prefersDark ? "dark" : "light";

    document.body.classList.remove("light", "dark");
    document.body.classList.add(theme);

    window
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", (e) => {
        document.body.classList.remove("light", "dark");
        document.body.classList.add(e.matches ? "dark" : "light");
      });
  </script>
</html>
